<template>
  <div class="project">
      <div class="account">
        <div class="account_title">工程计量款</div>
    </div>
    <div class="flexAround" style="margin-bottom:30px">
      <div class="part1_div">
        <div>累计计量次数</div>
        <div>2</div>
      </div>
      <div class="part1_div">
        <div>累计计量金额（万元）</div>
        <div>56.21</div>
      </div>
      <div class="part1_div" style="  border-right: none;">
        <div>上次计量金额（万元）</div>
        <div>21.21</div>
      </div>
    </div>

    <div class="flexBetween" style="margin-bottom:10px">
      <div style="color:#333;font-size:18px">计量清单</div>
      <div class="flexBetween">
        <div style="margin-right:30px">
          <a-radio-group v-model="radioGroup" :style="{ marginBottom: '8px' }">
            <a-radio-button value="1">
              全部
            </a-radio-button>
            <a-radio-button value="2">
              2020
            </a-radio-button>
            <a-radio-button value="3">
              2021
            </a-radio-button>
          </a-radio-group>
        </div>
        <div>
          <a-input-search
            placeholder="请输入单位名称查询"
            style="width: 200px"
            @search="onSearch"
          />
          <br />
        </div>
      </div>
    </div>
    <!-- 查看pdf -->

      <!-- <a-icon type="close" style="font-size: 18px;color:#ccc ;position:fixed ;top:20px;
  right:calc(50% - 495px) ;z-index:3099" v-if="visible"/> -->
      <a-modal
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :maskClosable="false"
    >
      <embed
        width="1000"
        height="700"
        src="http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
        type
      />
    </a-modal>
    
    <div>
      <a-table :columns="columns" :data-source="data" @change="onChange" >
      <div class="textSelect" slot="voucher" slot-scope="text" @click="pdfView">
        <span>{{ text }}</span>
        <span>{{ text }}</span>
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioGroup: "1",
      columns: [
        {
          title: "日期",
          dataIndex: "date",
          align:"center",
        },
        {
          title: "计量金额（万元）",
          dataIndex: "money",
          align:"center",
        },
        {
          title: "入账凭证",
          dataIndex: "voucher",
          align:"center",
          key: "voucher",
          scopedSlots: { customRender: "voucher" }
        },
      ],
      data: [
        {
          key: "1",
          date: "2020-02-21",
          money: "21.21",
          voucher:"计量凭证.pdf",
        },
        {
          key: "2",
          date: "2020-12-21",
          money: "35",
          voucher: "计量凭证.pdf",
        },
      ],
      visible :false
    };
  },
  methods:{
      onSearch() {},
    onChange(pagination, filters, sorter) {
      console.log("params", pagination, filters, sorter);
    },
    // pdfView() {
    //   window.open(
    //     "http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
    //   );
    // },
    pdfView() {
      this.visible = true;
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false;
    }
  }
};
</script>

<style scoped>
    ::v-deep .ant-table-pagination.ant-pagination{
   display: none; }
   .part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title{
    color:#1890ff ;
    font-size: 16px;
    margin-bottom: 10px;
}
.account{
    height: 45px;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 30px;
}
.account_title{
    width: 90px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    color: #1890ff;
    border-bottom:2px solid #1890ff;
    text-align: center;
    margin-left: 30px;
}
.textSelect span{
  margin-right: 15px;
}
.textSelect :last-child{
  margin-right: 0;
}
::v-deep .ant-modal {
  width: 1080px !important;
  top:10px
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
</style>
